import Base from '@/components/Base';
import {
  Button,
  Card,
  Row,
  Col,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton, View } from '@/components/KayUI';
import styles from './index.less';

interface State {
  selectOpts: string[];
}
interface Props {
  data: {
    answer: string;
    answerhtml: string;
    extraInfo: {
      title: string;
      value: string;
    }[];
    options: {
      [key: string]: string;
    };
    questionType: string;
    titleHtml: string;
    titleText: string;
  };
  submited?: boolean;
  onOption?: (res: string[]) => void;
}

export default class Index extends Base<Props, State> {
  public state: State = {
    selectOpts: [],
  };
  private typeInfo = [
    {
      name: '单选题',
      optionCount: 1,
    },
    {
      name: '多选题',
      optionCount: 10,
    },
    {
      name: '问答题',
      optionCount: 0,
    },
  ];

  public async didShow() {}

  public async didMount() {}

  public render() {
    const { selectOpts } = this.state;
    const { data, submited } = this.props;
    return (
      <View className={styles.item}>
        <div dangerouslySetInnerHTML={{ __html: data.titleHtml }}></div>
        <View className={styles.options}>
          {Object.keys(data.options).map((ind) => (
            <Row
              className={this.cx(styles.opt, {
                [styles.active]: selectOpts.indexOf(ind) > -1,
                [styles.activeTrue]: submited && data.answer == ind,
              })}
              onClick={this.handleSelect.bind(null, ind)}
            >
              <View className={styles.cir}></View>
              <div
                dangerouslySetInnerHTML={{ __html: data.options[ind] }}
                key={data.options[ind]}
              ></div>
            </Row>
          ))}
        </View>
        {submited && (
          <Row className={styles.resultBox}>
            <p>
              参考答案：
              <span className={styles.green}>{data.answer || ''}</span>
            </p>
            {data.questionType != '问答题' && (
              <p style={{ marginLeft: '20px' }}>我的答案：{this.myAnswer}</p>
            )}
          </Row>
        )}
        {submited && (
          <Row className={styles.resultBox}>
            <p>参考解析：</p>
            <div dangerouslySetInnerHTML={{ __html: this.analysis }}></div>
          </Row>
        )}
      </View>
    );
  }

  private get myAnswer() {
    const { selectOpts } = this.state;
    return selectOpts.length > 0 ? selectOpts.join(',') : '未作答';
  }
  private get analysis() {
    const { data } = this.props;
    return (
      (data.extraInfo.find((e) => e.title == '参考解析：') || {}).value || ''
    );
  }

  private get currentConfig() {
    const { data } = this.props;
    const res: any =
      this.typeInfo.find((e) => e.name == data.questionType) || {};
    return res;
  }

  private handleSelect = (val: string) => {
    let { selectOpts } = this.state;
    const { submited } = this.props;
    if (submited) {
      return;
    }

    const ind = selectOpts.indexOf(val);
    let value = [...selectOpts];
    if (ind > -1) {
      value.splice(ind, 1);
    } else if (this.currentConfig.optionCount == 1) {
      value = [val];
    } else {
      value = [...value, val];
    }

    this.setState({
      selectOpts: value,
    });
    if (this.props.onOption) {
      this.props.onOption(value);
    }
  };
}

// export default function IndexPage() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page index</h1>
//     </div>
//   );
// }
